<template>
  <div>
    <nav-top title="病例管理"
             :goback="true"></nav-top>
    <section class="caseManage">
      <ul class="manageList">
        <li class='content'
            v-for='(val,key) in manageList'
            :key="key">
          <div class='img'>
            <img :src='val.imgUrl' />
          </div>
          <div class="right">
            <p class="name">{{val.name}}</p>
            <van-icon class="icon"
                      style="float:right"
                      name="ellipsis"
                      @click="showDialog(key)" />
            <span class="size">{{val.size}}&nbsp;&nbsp;{{val.date}}</span>
            <div v-if='active == key'
                 class="dialog">
              <p>删除</p>
              <p>重命名</p>
            </div>
          </div>

        </li>
      </ul>
      <van-button @click='submit'
                  class="submit"
                  type="primary"
                  size="large">上传新病例</van-button>
    </section>

  </div>
</template>
<script>
import NavTop from "@/components/nav/navBar";

export default {
  components: {
    NavTop
  },
  data () {
    return {
      active: -1,
      manageList: [
        {
          id: 0,
          name: "张三病例.doc",
          size: '123KB',
          date: '2019.09.23 21:40',
          imgUrl: "/static/img/case/doc.png"
        }, {
          id: 0,
          name: "张三病例.png",
          size: '123KB',
          date: '2019.09.23 21:40',
          imgUrl: "/static/img/case/png.png"
        }, {
          id: 0,
          name: "张三病例.pdf",
          size: '123KB',
          date: '2019.09.23 21:40',
          imgUrl: "/static/img/case/pdf.png"
        }, {
          id: 0,
          name: "张三病例.jpg",
          size: '123KB',
          date: '2019.09.23 21:40',
          imgUrl: "/static/img/case/jpg.png"
        }, {
          id: 0,
          name: "张三病例.docx",
          size: '123KB',
          date: '2019.09.23 21:40',
          imgUrl: "/static/img/case/docx.png"
        }
      ],
    };
  },
  created () {
  },
  methods: {
    showDialog (key) {
      this.active = key == this.active ? -1 : key;
    },
    submit () {
      this.$store.dispatch('address/selectAddress', this.selectAddress);
      this.$router.push("/appointmentAdd")
    }
  }
};
</script>
<style lang="scss" scoped>
.caseManage {
  font-family: Microsoft YaHei;
  width: 320px;
  padding-bottom: 10px;
  .manageList {
    margin-top: 45px;
    .content {
      margin: 0 16px;
      border-bottom: 1px solid #f1f1f1;
      height: 79px;
      .img {
        margin: 20px 0 21px 0;
        float: left;
        width: 29px;
        height: 39px;
        img {
          width: 29px;
          height: 39px;
        }
      }
      .right {
        padding: 20px 0 0 47px;
        .icon {
          position: relative;
          top: -20px;
        }
        .name {
          margin: 0 0 5px 0;
          font-size: 11px;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }
        .size {
          font-size: 11px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }
        .dialog {
          width: 94px;
          height: 59px;
          border: 1px solid #f1f1f1;
          text-align: center;
          background: #fff;
          z-index: 999;
          position: relative;
          top: -25px;
          right: -140px;
          p {
            font-size: 11px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
          }
        }
      }
    }
  }
  .submit {
    width: 279px;
    height: 44px;
    margin: 83px 20.5px 0 20.5px;
    // position: absolute;
    // left: 21px;
    // bottom: 15px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: #06a44f;
    border: none;
  }
}
</style>